<!-- 
    说明：招聘企业-企业详情
 -->
<template>
    <div>
        <PageCom class="t_show_page" :showTop="'padding-top: 0.6rem;'">
            <!-- <PageCom class="t_show_page" :showHeader="'display: none;'" :showTop="'padding-top: 0.6rem'"> -->
            <section class="pc-review-page">
                <div class="nav-com">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
                        <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ name: 'hire' }">
                            招聘专区
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- 公司基本信息  -->
                  <!-- 公司基本信息  -->
                <div class="company-info">
                    <img class="logo" v-if="companyInfo.companyLogo" :src="companyInfo.companyLogo" v-imgError alt="logo" />
                    <img v-else class="logo" src="../../assets/images/logo_demo.png" v-imgError alt="logo" />
                    <div class="right-block">
                    <div class="name">{{ companyInfo.companyName }}</div>
                    <div class="area">
                        {{ companyInfo.industry }}
                        <div class="collectStatus" @click="changeCollectStatus">
                        <img src="../../assets/images/collection.png" v-if="!collectStatus" />
                        <img src="../../assets/images/collection_active.png" v-else />
                        <span v-if="!collectStatus">收藏</span>
                        <span v-else style="color: #fc9c21">收藏中</span>
                        </div>
                    </div>
                    </div>
                    <div class="right-hire">
                    <div class="hire-num">{{ companyInfo.recruitmentCount || 0 }}</div>
                    <div class="hire-title">在招职位</div>
                    <div class="btn" @click="linkTo('resumeEdit')">
                        <span class="edit-icon"></span>
                        {{ curriculumId ? "修改简历" : "填写简历" }}
                    </div>
                    <div class="click-num">点击量：{{ companyInfo.clickCount || 0 }}</div>
                    </div>
                    <div class="tag">
                    <span :class="['item', { current: tagType === 0 }]" @click="tagType = 0">企业介绍</span>
                    <span :class="['item', { current: tagType === 1 }]" @click="tagType = 1">在招职位</span>
                    </div>
                </div>
                <div class="t_btn" @click="linkTo('resumeEdit')">
                    <span class="edit-icon"></span>
                    {{ curriculumId ? "修改简历" : "填写简历" }}
                </div>
                <section v-show="tagType === 0">
                    <div class="favorite-condition">
                        <van-row>
                            <van-col span="12">
                                <div class="city" @click="show = true">
                                    <span>{{ queryParams.city ? queryParams.city : '全国' }}</span>
                                    <img src="../../assets/images/user/downdrop.png" alt="" />
                                </div>
                                <van-popup v-model="show" round position="bottom">
                                    <van-cascader
                                    v-model="value"
                                    active-color="#1989fa"
                                    title="请选择所在地区"
                                    :options="options"
                                    @close="show = false"
                                    @finish="onFinish"
                                    />
                                </van-popup>
                            </van-col>
                            <van-col span="12">
                                <div class="city" @click="show1 = true">
                                    <span>{{ queryParams.studentType === "" ? '经验要求' : queryParams.studentTypeName }}</span>
                                    <img src="../../assets/images/user/downdrop.png" alt="" />
                                </div>
                                <van-popup v-model="show1" position="bottom">
                                    <van-picker show-toolbar value-key="label" active-color="#1989fa" :columns="TstudentType"
                                        @confirm="onFinish1"
                                        @cancel="show1 = false" />
                                </van-popup>
                                <!-- <van-popup v-model="show1" round position="bottom">
                                    <van-cascader
                                    v-model="value1"
                                    active-color="#1989fa"
                                    title="请选择学历要求"
                                    value-key="label"
                                    :options="TstudentType"
                                    @close="show1 = false"
                                    @finish="onFinish1"
                                    />
                                </van-popup> -->
                            </van-col>
                            <!-- <van-col span="8">
                                <div class="city" @click="show2 = true">
                                    <span>{{ queryParams.education === "" ? '学历要求' : queryParams.educationName }}</span>
                                    <img src="../../assets/images/user/downdrop.png" alt="" />
                                </div>
                                <van-popup v-model="show2" round position="bottom">
                                    <van-picker show-toolbar value-key="label" active-color="#1989fa" :columns="TeducationOptions"
                                            @confirm="onFinish2"
                                            @cancel="show2 = false" />
                                </van-popup>
                            </van-col> -->
                        </van-row>
                    </div>
                    <!-- 热招职位 -->
                    <div class="row-item">
                        

                        <!-- <div class="title">
                            热招职位
                            <div class="all" @click="tagType = 1">
                                <span class="all-icon"></span>查看全部职位
                            </div>
                        </div> -->
                        <div
                            v-if="Array.isArray(shortJobList) && jobList.length">
                            <div style="" v-for="(item, index) in jobList" :key="index">
                                <div class="job-item" @click="linkToJobDetail(item.id)">
                                    <div class="row1">
                                        <div class="job-name">
                                            {{ item.jobName }}
                                        </div>
                                        <div class="salary">
                                            {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                                        </div>
                                    </div>
                                    <div class="other">
                                        <span>{{ item.workPeriod }} </span>
                                        <span class="line"></span>
                                        <span>{{ item.practicePeriod }}个月 </span>
                                        <span class="line"></span>
                                        <span>{{ item.education }} </span>
                                        <span class="line"></span>
                                        <span>{{ ["在校", "应届"][item.identify] }}</span>
                                        <span class="line"></span>
                                        <span>{{ item.city }} </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-empty style="width: 100%" description="暂无数据" v-else></el-empty>
                    </div>
                </section>
                <section v-show="tagType === 8">
                    <!-- 搜索工作栏 -->
                    <el-form style="margin: 22px 0 0" :model="queryParams" ref="queryForm" :inline="true"
                        label-width="68px">
                        <el-form-item prop="status">
                            <i class="condition-icon"></i>
                            <el-cascader size="mini" v-model="queryParams.city" :show-all-levels="false"
                                :options="provinceAndCityData" :props="{ value: 'label' }" placeholder="工作城市"></el-cascader>
                        </el-form-item>
                        <el-form-item prop="companyName">
                            <el-select size="mini" v-model="queryParams.studentType" placeholder="招聘对象" clearable>
                                <el-option v-for="dict in studentType" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="status">
                            <el-select size="mini" v-model="queryParams.education" placeholder="学历要求" clearable>
                                <el-option v-for="dict in educationOptions" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="danger" @click="resetQuery">重置</el-button>
                            <el-button size="mini" type="primary" @click="handleQuery">搜索</el-button>
                        </el-form-item>
                    </el-form>
                    <section class="job-list">
                        <el-empty description="暂无相关职位" v-if="jobList.length <= 0"></el-empty>
                        <div class="item" :key="index" @click="linkToJobDetail(item.id)" v-for="(item, index) in jobList">
                            <div class="job-name">
                                {{ item.jobName }} <span class="city">{{ item.city }}</span>
                            </div>
                            <div class="other">
                                {{ item.workPeriod }} <span class="line"></span>
                                {{ item.practicePeriod }}个月<span class="line"></span>
                                {{ item.lowestSalary + "-" + item.highestSalary }}元/天
                                <span class="line" v-if="item.education"></span>
                                {{ item.education ? item.education : "" }}
                                <span class="line" v-if="item.identify"></span>
                                {{ item.identify ? ["在校", "应届"][item.identify] : "" }}
                            </div>
                            <div class="btn">职位详情</div>
                        </div>
                    </section>
                    <!-- 分页组件 -->
                    <el-pagination v-if="total > 0" class="bottom-page" background layout="prev, pager, next" :total="total"
                        :page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 40, 50]" @size-change="pagesizeHandle"
                        @current-change="currentChange" :current-page="queryParams.pageNo">
                    </el-pagination>
                </section>
            </section>
        </PageCom>
    </div>
</template>

<script>
import {
    provinceAndCityData,
    studentType,
    educationOptions,
    getEducationName,
    getWorkPeriodName,
} from "@/utils/frontDataDict.js";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import PageCom from "@/components/page/index.vue";
import {
    getCompanyInfo,
    getJobListOld,
    isCollectCompany,
    createOrUpdateCollectCompany,
} from "../../request/api";
import vueVideoPlayer from "./components/videoPlayer.vue";
import { deepClone } from "../../utils";
import { mapState } from "vuex";
export default {
    name: "pcReview",
    data() {
        return {
            show: false,
            show1: false,
            show2: false,
            value: '',
            value1: '',
            value2: '',
            options: [],
            provinceAndCityData,
            TeducationOptions: [],
            TstudentType: [],
            studentType,
            educationOptions,
            total: 0,
            tagType: 0,
            swiper: null,
            companyInfo: {},
            jobList: [],
            shortJobList: [],
            imgList: [],
            imgVideoList: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                education: "",
                studentType: "",
                city: "",
            },
            collectStatus: false,
        };
    },
    components: {
        PageCom,
        vueVideoPlayer,
    },
    mounted() {
        this.init();
        this.options = this.getCityData(provinceAndCityData);
        this.TstudentType = studentType.map(item => { return { label: item.label, value: item.value } })
        this.TeducationOptions = educationOptions.map(item=>{return {label: item.label, value: item.value}})
    },
    computed: {
        ...mapState(["curriculumId", "USER_INFO"]),
    },
    methods: {
        onFinish1(item, index) {
            // console.log(a,b,c)
            this.queryParams.studentType = item.value;
            this.queryParams.studentTypeName = item.label;
            this.show1 = false;
            // console.log(selectedOptions)
            this.getJobListFun();
        },
        onFinish2(item) {
            this.queryParams.education = item.value;
            this.queryParams.educationName = item.text;
            this.show2 = false;
            this.getJobListFun();
          console.log(item)  
        },
        // 提交城市
        onFinish({ selectedOptions }) {
            this.show = false;
            let cityName = selectedOptions.map((option) => option.text);
            this.queryParams.city = cityName[1];
            this.getJobListFun();
            // this.init();
        },
        // 处理城市
        getCityData(arr) {
            let newArr = arr.map((item) => {
                if (item.children) this.getCityData(item.children);
                item.text = item.label;
                return item;
            });
            newArr = [{text: '全国', value: ''}, ...newArr]
            return newArr;

        },
        videoPlay(index) {
            let videoItem = this.$refs[`video${index}`][0];
            videoItem &&
                this.imgVideoList.map((item, inx) => {
                    if (item.type === "video" && inx !== index) {
                        this.$refs[`video${inx}`][0].pause();
                    }
                });
        },
        changeCollectStatus() {
            let id =
                this.$route.query?.id;
            createOrUpdateCollectCompany({
                status: this.collectStatus ? "0" : "1",
                companyId: id,
                city: this.companyInfo.companyAddress[0].city,
                studentId: this.USER_INFO.id,
            }).then((res) => {
                if (res.data) {
                    this.collectStatus = !this.collectStatus;
                }
            });
        },
        pagesizeHandle(val) {
            this.queryParams.pageSize = Number(val);
            this.getJobListFun();
        },
        currentChange(e) {
            this.queryParams.pageNo = Number(e);
            this.getJobListFun();
        },
        init() {
            let id =
                this.$route.query?.id;
            getCompanyInfo({
                id,
            }).then((res) => {
                if (res.data) {
                    try {
                        if (Array.isArray(JSON.parse(res.data.industry))) {
                            res.data.industry = JSON.parse(res.data.industry)[1];
                        }
                        if (Array.isArray(JSON.parse(res.data.companyAddress))) {
                            res.data.companyAddress = JSON.parse(res.data.companyAddress);
                        }
                        res.data.education = getEducationName(res.data.education);
                    } catch {
                        () => { };
                    }
                    try {
                        this.imgVideoList = [];
                        res.data.environment = JSON.parse(res.data.environment);
                        res.data.environment.videoList.forEach((v) => {
                            console.log(v);
                            v.src &&
                                this.imgVideoList.push({
                                    type: "video",
                                    url: v?.src ?? v,
                                    updateTime: v?.updateTime ?? "",
                                });
                        });
                        res.data.environment.imgList.forEach((v) => {
                            this.imgVideoList.push({
                                type: "img",
                                url: v?.src ?? v,
                                updateTime: v?.updateTime ?? "",
                            });
                        });
                    } catch {
                        () => { };
                    }
                    this.companyInfo = res.data;
                    this.imgList = res.data.environment.imgList;
                    setTimeout(() => {
                        this.initSwiper();
                    });

                    isCollectCompany({
                        //判断该企业是否被收藏
                        companyId: id,
                        studentId: this.USER_INFO.id,
                    }).then((res) => {
                        this.collectStatus = res.data;
                    });
                }
            });
            this.getJobListFun();
        },
        getJobListFun() {
            let params = {
                pageNo: this.queryParams.pageNo,
                pageSize: this.queryParams.pageSize,
                companyId:
                    this.$route.query?.id,
            };
            if (this.queryParams.city) {
                params.city = this.queryParams.city[1];
            }
            if (this.queryParams.studentType != "") {
                params.identify = this.studentType[this.queryParams.studentType].value;
            }
            if (this.queryParams.education) {
                params.education = this.queryParams.education;
            }
            getJobListOld(params).then((res) => {
                if (res.data) {
                    let { list, total } = res.data;
                    list.forEach((v) => {
                        v.workPeriod && (v.workPeriod = getWorkPeriodName(v.workPeriod));
                        try {
                            // 学历
                            if (Array.isArray(JSON.parse(v.education))) {
                                v.education = getEducationName(v.education, true);
                            }
                        } catch {
                            () => { };
                        }
                        try {
                            if (Array.isArray(JSON.parse(v.city))) {
                                v.city = JSON.parse(v.city)[1];
                            }
                        } catch {
                            () => { };
                        }
                    });
                    this.jobList = list;
                    // this.shortJobList = list.length > 3 ? list.slice(0, 3) : list;
                    let shortJobList = deepClone(list);
                    this.shortJobList = shortJobList
                        .sort(function (a, b) {
                            return b.clickCount - a.clickCount;
                        })
                        .slice(0, 3);
                    this.total = total;
                    // if(this.queryParams.pageNo == 1){//只截取第一页的前三条职位数据
                    //   this.shortJobList = list.length>=3?list.slice(0, 3):list
                    // }
                }
            });
        },
        linkToJobDetail(id) {
            this.$router.push({
                path: `/jobDetail/${id}`,
            });
        },
        linkTo(routeName, id = null) {
            if (id) {
                localStorage.setItem("currentJobId", id);
                this.$router.push({
                    name: routeName,
                    params: { id, companyId: this.$route.params.id },
                });
            } else {
                this.$router.push({ name: routeName });
            }
        },
        getList(e) {
            this.pageNo = e.page;
            this.getJobListFun();
            console.log("请求页面数据", e);
        },
        /** 重置按钮操作 */
        resetQuery() {
            (this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                education: "",
                studentType: "",
                city: "",
            }),
                this.handleQuery();
        },
        handleQuery() {
            this.getJobListFun();
        },
        initSwiper() {
            if (this.swiper === null) {
                this.swiper = new Swiper("#mySwiper", {
                    slidesPerView: "auto",
                    spaceBetween: 25,
                    observer: true,
                    observeParents: true,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            }
        },
        slidePrev() {
            this.swiper.slidePrev();
        },
        slideNext() {
            this.swiper.slideNext();
        },
    },
};
</script>
<style lang="less" scoped>
.pc_show_page {
    display: block;
}

.t_show_page {
    display: none;
}

.el-image__error,
.el-image__inner,
.el-image__placeholder {
    padding-top: 66.66%;
}

.pc-review-page {
    position: relative;
    background: #fff;

    .t_btn {
        display: none;
    }

    .company-info {
        position: relative;
        height: 212px;
        width: 100%;
        border-bottom: 1px solid #d4d6da;
        padding-bottom: 42px;

        .logo {
            display: block;
            width: 100px;
            height: 100px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #d4d6da;
            float: left;
            margin-right: 30px;
        }

        .right-block {
            position: relative;
            overflow: hidden;
            width: calc(100% - 130px);
            height: 100px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;

            .name {
                font-size: 35px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #37383d;
                line-height: 40px;
                margin-bottom: 12px;
            }

            .area {
                font-size: 22px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 30px;
                display: flex;
                align-items: center;

                .collectStatus {
                    height: 30px;
                    margin-left: 20px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    img {
                        width: 23px;
                        height: 23px;
                        margin-right: 3px;
                    }

                    span {
                        font-size: 20px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #9597a0;
                    }
                }
            }
        }

        .right-hire {
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            padding-top: 8px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: flex-end;

            .hire-num {
                font-size: 32px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #37383d;
                line-height: 40px;
                margin-bottom: 6px;
                // padding-right: 15px;
            }

            .hire-title {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 22px;
                margin-bottom: 15px;
            }

            .btn {
                width: 146px;
                height: 44px;
                line-height: 44px;
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                background: #3d6cb0;
                text-align: center;
                border-radius: 34px;
                cursor: pointer;
                margin-bottom: 13px;

                .edit-icon {
                    display: inline-block;
                    width: 14px;
                    height: 16px;
                    background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
                }

                &:hover {
                    color: #2f8efe;
                }
            }

            .click-num {
                font-size: 15px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 22px;
                // padding-right: 4px;
            }
        }

        .tag {
            position: absolute;
            left: 0;
            bottom: 8px;
            width: 50%;
            height: 30px;
            padding-left: 10px;

            .item {
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 24px;
                margin-right: 25px;
                vertical-align: bottom;
                cursor: pointer;
            }

            .item:hover {
                color: #2f8efe;
            }

            .current {
                font-size: 22px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #2f8efe;
                line-height: 24px;
            }
        }
    }

    .row-item {
        position: relative;
        width: 100%;
        padding: 15px 0 15px;
        border-bottom: 1px solid #d4d6da;
        overflow-x: hidden;

        &:last-child {
            border-bottom: 1px solid #fff;
        }

        .title {
            position: relative;
            text-align: left;
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #37383d;
            line-height: 40px;
            margin-bottom: 15px;

            .all {
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #2f8efe;
                line-height: 40px;
                vertical-align: middle;
                cursor: pointer;

                .all-icon {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background: url("../../assets/images/check_all.png") no-repeat center center / cover;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
        }

        .job-item {
            position: relative;
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid #d4d6da;
            padding: 15px;
            margin-right: 20px;
            cursor: pointer;

            .row1 {
                position: relative;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                margin-bottom: 15px;

                .job-name {
                    width: 1.55rem;
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #37383d;
                    line-height: 24px;
                    margin-bottom: 10px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .salary {
                    width: 140px;
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 24px;
                    text-align: right;
                }
            }

            .other {
                width: 300px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 20px;

                .line {
                    position: relative;
                    display: inline-block;
                    width: 1px;
                    height: 14px;
                    background: #9597a0;
                    margin: 0 8px;
                }
            }

            &:hover {
                box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

                .job-name {
                    color: #2f8efe;
                }
            }
        }

        .company-desc {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 27px;
            word-break: break-all;
        }

        .company-environment {
            width: 100%;
            height: 100%;
            position: relative;

            .swiper-slide {
                width: 500px;
                height: 300px;
                text-align: center;
                font-size: 16px;
                background: #fff;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                overflow: hidden;

                .t_swiper_item {
                    width: 500px;

                    .t_swiper_img {
                        width: 500px;
                    }
                }
            }

            .swiper-slide img {
                display: block;
                width: 100%;
                object-fit: cover;
                padding-top: 66.66% !important;
            }

            .swiper-slide .video {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .swiper-button-next {
                position: absolute;
                right: -50px;
                top: 50%;
                margin: 0;
                transform: translateY(-50%) scale(0.8);
                width: 180px;
                height: 180px;
                background: url(../../assets/images/next.png) no-repeat;
                background-position: center;
                background-size: cover;
                cursor: pointer;
                z-index: 5;

                &::after {
                    display: none;
                }
            }

            .swiper-button-prev {
                position: absolute;
                left: -50px;
                top: 50%;
                margin: 0;
                transform: translateY(-50%) scale(0.8);
                width: 180px;
                height: 180px;
                background: url(../../assets/images/prev.png) no-repeat;
                background-position: center;
                background-size: cover;
                cursor: pointer;
                z-index: 5;

                &::after {
                    display: none;
                }
            }
        }

        .company-address {
            position: relative;

            .item {
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #37383d;
                margin-top: 35px;
                line-height: 24px;
                cursor: pointer;

                &:first-child {
                    margin-top: 0;
                }

                .position-icon {
                    display: inline-block;
                    width: 15px;
                    height: 20px;
                    margin-right: 10px;
                    background: url("../../assets/images/position.png") no-repeat center center / cover;
                    vertical-align: middle;
                }
            }
        }
    }

    .condition-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/images/condition.png") no-repeat center center / cover;
        vertical-align: middle;
        margin-right: 10px;
    }

    .job-list {
        position: relative;

        .item {
            position: relative;
            width: 100%;
            margin-bottom: 15px;
            border-radius: 10px;
            padding: 25px 0 36px 25px;
            border: 1px solid #d4d6da;
            overflow: hidden;

            &::before {
                content: "";
                display: block;
                width: 10px;
                height: 100%;
                background: #4677b9;
                position: absolute;
                top: 0;
                left: 0;
            }

            .job-name {
                font-size: 22px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #37383d;
                line-height: 36px;
                margin-bottom: 15px;

                .city {
                    font-size: 20px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 30px;
                    vertical-align: bottom;
                    margin-left: 15px;
                }
            }

            .other {
                width: 280;
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 30px;

                .line {
                    position: relative;
                    display: inline-block;
                    width: 1px;
                    height: 14px;
                    background: #9597a0;
                    margin: 0 10px;
                }
            }

            .btn {
                position: absolute;
                width: 122px;
                height: 42px;
                line-height: 42px;
                background: #4677b9;
                border-radius: 4px;
                right: 30px;
                top: 50%;
                margin-top: -20px;
                text-align: center;
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                cursor: pointer;
            }

            &:hover {
                box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

                .job-name {
                    color: #2f8efe;
                    cursor: pointer;
                }
            }
        }
    }
}

.bottom-page {
    margin-top: 20px;
    text-align: center;
}

/deep/ .el-breadcrumb__inner {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 28px;
    cursor: pointer;
}

.el-button--danger {
    width: 64px;
    height: 40px;
    font-size: 15px;
    border: none;
    background: #fff;
    color: #3d6cb0;
}

.el-button--primary {
    width: 64px;
    height: 40px;
    padding: 0;
    background: #4677b9;
    border-radius: 5px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    border: none;
    font-weight: 500;
}

@media screen and (max-width: 480px) {
    .pc_show_page {
        display: none;
    }

    .t_show_page {
        display: block;
    }

    .pc-review-page {
        position: relative;
        background: #fff;

        .nav-com {
            display: none;
        }

        .t_btn {
            display: block;
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            background: #3d6cb0;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            margin-bottom: 13px;

            .edit-icon {
                display: inline-block;
                width: 14px;
                height: 16px;
                background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
            }

            &:hover {
                color: #2f8efe;
            }
        }

        .company-info {
            position: relative;
            height: 99px;
            width: 100%;
            border-bottom: 1px solid #d4d6da;
            padding-bottom: 0;

            .logo {
                display: block;
                width: 63px;
                height: 63px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #d4d6da;
                float: left;
                margin-right: 14px;
            }

            .right-block {
                position: relative;
                overflow: hidden;
                width: calc(100% - 130px);
                height: auto;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: flex-start;

                .name {
                    font-size: 22px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #37383d;
                    line-height: 30px;
                    margin-bottom: 5px;
                }

                .area {
                    font-size: 15px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 21px;
                    display: flex;
                    align-items: center;

                    .collectStatus {
                        height: 30px;
                        margin-left: 20px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 15px;
                            height: 15px;
                            margin-right: 5px;
                        }

                        span {
                            font-size: 15px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #9597a0;
                        }
                    }
                }
            }

            .right-hire {
                position: absolute;
                top: 0;
                right: 0;
                width: 40%;
                height: 100%;
                padding-top: 8px;
                display: flex;
                flex-flow: column nowrap;
                justify-content: flex-start;
                align-items: flex-end;

                .hire-num {
                    font-size: 20px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #37383d;
                    line-height: 28px;
                    margin-bottom: 6px;
                    // padding-right: 15px;
                }

                .hire-title {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 17px;
                    margin-bottom: 15px;
                }

                .btn {
                    display: none;
                    width: 146px;
                    height: 44px;
                    line-height: 44px;
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    background: #3d6cb0;
                    text-align: center;
                    border-radius: 34px;
                    cursor: pointer;
                    margin-bottom: 13px;

                    .edit-icon {
                        display: inline-block;
                        width: 14px;
                        height: 16px;
                        background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
                    }

                    &:hover {
                        color: #2f8efe;
                    }
                }

                .click-num {
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 14px;
                    // padding-right: 4px;
                }
            }

            .tag {
                display: none;
                position: absolute;
                left: 0;
                bottom: 8px;
                width: 50%;
                height: 30px;
                padding-left: 10px;

                .item {
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 24px;
                    margin-right: 25px;
                    vertical-align: bottom;
                    cursor: pointer;
                }

                .item:hover {
                    color: #2f8efe;
                }

                .current {
                    font-size: 22px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #2f8efe;
                    line-height: 24px;
                }
            }
        }

        .row-item {
            position: relative;
            width: 100%;
            padding-top: 0.15rem;
            border-bottom: 1px solid #d4d6da;
            overflow-x: hidden;

            &:last-child {
                border-bottom: 1px solid #fff;
            }

            .title {
                position: relative;
                text-align: left;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #37383d;
                line-height: 22px;
                margin-bottom: 15px;

                .all {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    font-size: 12px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #9597A0;
                    line-height: 17px;
                    vertical-align: middle;
                    margin-right: 10px;
                    cursor: pointer;

                    .all-icon {
                        display: inline-block;
                        width: 9px;
                        height: 18px;
                        background: url("../../assets/images/more.png") no-repeat center center / cover;
                        vertical-align: top;
                        margin-right: -90px;
                    }
                }
            }

            .job-item {
                position: relative;
                background: #ffffff;
                border-radius: 10px;
                border: 1px solid #d4d6da;
                padding: 15px;
                margin-right: 0;
                margin-bottom: 0.2rem;
                cursor: pointer;

                .row1 {
                    position: relative;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    margin-bottom: 15px;

                    .job-name {
                        font-size: 18px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #37383d;
                        line-height: 24px;
                        margin-bottom: 10px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .salary {
                        width: auto;
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #9597a0;
                        line-height: 24px;
                        text-align: right;
                    }
                }

                .other {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 20px;

                    .line {
                        position: relative;
                        display: inline-block;
                        width: 1px;
                        height: 14px;
                        background: #9597a0;
                        margin: 0 8px;
                    }
                }

                &:hover {
                    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

                    .job-name {
                        color: #2f8efe;
                    }
                }
            }

            .company-desc {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9597a0;
                line-height: 25px;
                word-break: break-all;
            }

            .company-environment {
                width: 100%;
                height: 100%;
                position: relative;

                .swiper-button-prev {
                    display: none;
                }

                .swiper-button-next {
                    display: none;
                }

                .swiper-slide {
                    width: 250px;
                    height: 135px;
                    text-align: center;
                    font-size: 16px;
                    background: #fff;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    overflow: hidden;
                    margin-right: 10px !important;

                    .t_swiper_item {
                        width: 250px;

                        .t_swiper_img {
                            width: 250px;
                            height: 135px;
                        }
                    }
                }

                .swiper-slide img {
                    display: block;
                    width: 100%;
                    object-fit: cover;
                    padding-top: 66.66% !important;
                }

                .swiper-slide .video {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .swiper-button-next {
                    position: absolute;
                    right: -50px;
                    top: 50%;
                    margin: 0;
                    transform: translateY(-50%) scale(0.8);
                    width: 180px;
                    height: 180px;
                    background: url(../../assets/images/next.png) no-repeat;
                    background-position: center;
                    background-size: cover;
                    cursor: pointer;
                    z-index: 5;

                    &::after {
                        display: none;
                    }
                }

                .swiper-button-prev {
                    position: absolute;
                    left: -50px;
                    top: 50%;
                    margin: 0;
                    transform: translateY(-50%) scale(0.8);
                    width: 180px;
                    height: 180px;
                    background: url(../../assets/images/prev.png) no-repeat;
                    background-position: center;
                    background-size: cover;
                    cursor: pointer;
                    z-index: 5;

                    &::after {
                        display: none;
                    }
                }
            }

            .company-address {
                position: relative;

                .item {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #37383d;
                    margin-top: 15px;
                    line-height: 20px;
                    cursor: pointer;

                    &:first-child {
                        margin-top: 0;
                    }

                    .position-icon {
                        position: relative;
                        top: -2px;
                        display: inline-block;
                        width: 12px;
                        height: 14px;
                        margin-left: 3px;
                        margin-right: 10px;
                        background: url("../../assets/images/position.png") no-repeat center center / cover;
                        vertical-align: middle;
                    }
                }
            }
        }

        .condition-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url("../../assets/images/condition.png") no-repeat center center / cover;
            vertical-align: middle;
            margin-right: 10px;
        }

        .job-list {
            position: relative;

            .item {
                position: relative;
                width: 100%;
                margin-bottom: 15px;
                border-radius: 10px;
                padding: 25px 0 36px 25px;
                border: 1px solid #d4d6da;
                overflow: hidden;

                &::before {
                    content: "";
                    display: block;
                    width: 10px;
                    height: 100%;
                    background: #4677b9;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .job-name {
                    font-size: 22px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #37383d;
                    line-height: 36px;
                    margin-bottom: 15px;

                    .city {
                        font-size: 20px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #9597a0;
                        line-height: 30px;
                        vertical-align: bottom;
                        margin-left: 15px;
                    }
                }

                .other {
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #9597a0;
                    line-height: 30px;

                    .line {
                        position: relative;
                        display: inline-block;
                        width: 1px;
                        height: 14px;
                        background: #9597a0;
                        margin: 0 10px;
                    }
                }

                .btn {
                    position: absolute;
                    width: 122px;
                    height: 42px;
                    line-height: 42px;
                    background: #4677b9;
                    border-radius: 4px;
                    right: 30px;
                    top: 50%;
                    margin-top: -20px;
                    text-align: center;
                    font-size: 17px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                    cursor: pointer;
                }

                &:hover {
                    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);

                    .job-name {
                        color: #2f8efe;
                        cursor: pointer;
                    }
                }
            }
        }
    }
      .favorite-condition {
    display: block;
    width: 100%;
    height: 0.45rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    // border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
    // position: fixed;
    // top: 1.03rem;
    left: 0;
    .city {
      display: flex;
      height: 0.45rem;
      justify-content: center;
      align-items: center;
      img {
        width: 0.12rem;
        height: 0.07rem;
        margin-left: 0.25rem;
      }
    }
    .condition-right {
      position: relative;
      .dropdown-icon {
        position: absolute;
        width: 0.12rem;
        height: 0.07rem;
        top: 0.19rem;
        right: 0.2rem;
      }
      .search_btn_box{
        display: flex;
        width: 100%;
        height: 0.45rem;
        border-top: 0.01rem solid #F0F0F0;

        .search_btn{
          flex: 1;
          height: 0.45rem;
          line-height: 0.45rem;
          text-align: center;
        }
        .search_left_btn{
          color: #3D6CB0;
          // background-color: #fff;

        }
        .search_right_btn{
          color: #fff;
        background-color: #3D6CB0;

        }
      }
    }
  }
}</style>
